Revision:
<div>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<p class="radio-group">
<label><input type="radio" name="rotate-cube-side" value="front"checked />front</label>
<label><input type="radio" name="rotate-cube-side" value="right" />right</label>
<label><input type="radio" name="rotate-cube-side" value="back" />back</label>
<label><input type="radio" name="rotate-cube-side" value="left" />left</label>
<label><input type="radio" name="rotate-cube-side" value="top" />top</label>
<label><input type="radio" name="rotate-cube-side" value="bottom" />bottom</label>
</p>
</div>
<style>
.scene {width: 30vw; height: 30vw; border: 1px solid #CCC; margin: 8vw; perspective: 50vw;}
.cube {width: 30vw; height: 30vw; position: relative; transform-style: preserve-3d; transform: translateZ(-10vw); transition: transform 1s; }
.cube.show-front { transform: translateZ(-10vw) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-10vw) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-10vw) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-10vw) rotateY( 90deg); }
.cube.show-top { transform: translateZ(-10vw) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-10vw) rotateX( 90deg); }
.cube__face {position: absolute; width: 30vw; height: 30vw; border: 0.2vw
solid black; line-height: 30vw; font-size: 4vw; font-weight: bold;
color: red; text-align: center; vertical-align: text-top;}
.cube__face--front { background-image: url("../images/1.jpg"); background-size:cover;}
.cube__face--right { background-image: url("../images/2.jpg"); background-size:cover;}
.cube__face--back { background-image: url("../images/3.jpg"); background-size:cover;}
.cube__face--left { background-image: url("../images/8.jpg"); background-size:cover;}
.cube__face--top { background-image: url("../images/5.jpg"); background-size:cover;}
.cube__face--bottom { background-image: url("../images/6.jpg"); background-size:cover;}
.cube__face--front { transform: rotateY( 0deg) translateZ(15vw); }
.cube__face--right { transform: rotateY( 90deg) translateZ(15vw); }
.cube__face--back { transform: rotateY(180deg) translateZ(15vw); }
.cube__face--left { transform: rotateY(-90deg) translateZ(15vw); }
.cube__face--top { transform: rotateX( 90deg) translateZ(15vw); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(15vw); }
label { margin-right: 1vw; }
</style>
<script>
var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.radio-group');
var currentClass = '';
function changeSide() {
var checkedRadio = radioGroup.querySelector(':checked');
var showClass = 'show-' + checkedRadio.value;
if ( currentClass ) {
cube.classList.remove( currentClass );
}
cube.classList.add( showClass );
currentClass = showClass;
}
// set initial side
changeSide();
radioGroup.addEventListener( 'change', changeSide );
</script>